<template>
  <div>
    <div>
      <el-input style="width: 200px" placeholder="请输入用户id"
                v-model="user_id"></el-input>
      <el-input style="width: 200px;margin-left: 5px" placeholder="请输入标题"
                v-model="head"></el-input>
      <el-button style="margin: 5px; color: cadetblue" @click="search">搜索</el-button>
      <el-button style="margin-left: 0; color: #c5b8a5" @click="reset">重置</el-button>
    </div>

    <div style="margin: 10px 0">
    </div>

    <!--    展示所有解决方案信息表格-->
    <el-table :data="tableData" border stripe :header-cell-style="{backgroundColor: '#F2F2E6'}">
      <el-table-column align="center" prop="id" label="ID" width="100"></el-table-column>
      <el-table-column align="center" prop="userId" label="用户id" width="100"></el-table-column>
      <el-table-column align="center" prop="name" label="标题"></el-table-column>
      <el-table-column align="center" prop="detail" label="内容" width="150">
        <template slot-scope="scope">
          <a-button style="color: cornflowerblue" @click="view(scope.row)">查看<a-icon type="eye" /></a-button>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="发布时间" width="200"></el-table-column>
      <el-table-column align="center" label="操作" width="300">
        <template slot-scope="scope">
          <a-button style="color: indianred" slot="reference" @click="open_back(scope.row)">打回<a-icon type="logout" /></a-button>
          <el-popconfirm
            style="margin-left: 8px"
            confirm-button-text='确定'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="#a27e7e"
            title="确定审核通过吗？"
            @confirm="pass(scope.row)"
          >
            <a-button style="color: cornflowerblue" slot="reference">通过<a-icon type="check-circle" /></a-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <el-dialog title="创意详情" :visible.sync="viewDialogVis" width="60%" >
      <el-descriptions class="margin-top" :column="1" border>
        <el-descriptions-item
          label="创意名称"
          label-style="text-align: center; width: 170px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
          {{creative.name}}
        </el-descriptions-item>
        <el-descriptions-item
          label="创意描述"
          label-style="text-align: center; width: 170px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
          {{creative.detail}}
        </el-descriptions-item>
        <el-descriptions-item
          label="创意特征"
          label-style="text-align: center; width: 170px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
          {{creative.feature}}
        </el-descriptions-item>
        <el-descriptions-item
          label="创意草图"
          label-style="text-align: center; width: 170px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
          <span v-if="creative.sketch==='{}'">暂无</span>
          <img v-else :src="creative.sketch" width="200"/>
        </el-descriptions-item>
        <el-descriptions-item
          label="草图描述"
          label-style="text-align: center; width: 170px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
          {{creative.sketchInfo}}
        </el-descriptions-item>
        <el-descriptions-item
          label="创意图片"
          label-style="text-align: center; width: 170px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
          <span v-if="creative.picture==='{}'">暂无</span>
          <img v-else :src="creative.picture" width="200"/>
        </el-descriptions-item>
        <el-descriptions-item
          label="图片描述"
          label-style="text-align: center; width: 170px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
          {{creative.picInfo}}
        </el-descriptions-item>
        <el-descriptions-item
          label="创意视频"
          label-style="text-align: center; width: 170px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
          <a :href="creative.video">{{creative.video}}</a>
        </el-descriptions-item>
        <el-descriptions-item
          label="视频描述"
          label-style="text-align: center; width: 170px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
          {{creative.videoInfo}}
        </el-descriptions-item>
        <el-descriptions-item
          label="创意类型"
          label-style="text-align: center; width: 170px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
          {{creative.type}}
        </el-descriptions-item>
        <el-descriptions-item
          label="发布时间"
          label-style="text-align: center; width: 170px; font-weight: bold; background-color: #FFFAF4; color: #2C2E2D">
          {{creative.createTime}}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <el-dialog title="打回方案" :visible.sync="backDialogVis" width="30%" z-index="100">
      <el-form label-width="120px" style="height: 20vh; margin-top: 20px">
        <el-form-item label="打回理由">
          <el-select v-model="message" placeholder="请选择理由">
            <el-option label="含有违规内容" value="含有违规内容"></el-option>
            <el-option label="篇幅过短" value="篇幅过短"></el-option>
            <el-option label="无意义灌水" value="涉嫌无意义灌水"></el-option>
            <el-option label="涉嫌广告" value="涉嫌广告"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align: right; margin-right: 20px">
        <el-button type="primary" @click="back()">打回</el-button>
        <el-button @click="backDialogVis=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Creative_Check",
  data(){
    return{
      tableData: [], //表格数据
      total: 0, //总数
      pageNum: 1, //当前页
      pageSize: 5, //每页条数
      viewDialogVis: false, //具体内容对话框
      creative: {}, //正在查看的创意
      user_id: '', //用户id
      search_user_id: '', //搜索用户id
      head: '', //标题
      search_head: '', //搜索标题
      backDialogVis: false,
      message: '',
    }
  },
  created() {
    this.load()
  },
  methods:{
    view(creative) { //查看详细内容
      this.creative = creative
      this.viewDialogVis = true
    },

    open_back(creative) {
      this.message=''
      this.backDialogVis=true
      this.creative = creative
    },

    handleSizeChange(pageSize) { //更改每页条数
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) { //翻页
      this.pageNum = pageNum
      this.load()
    },

    load() { // 请求分页查询
      request.get("/creative/adminGetToExamine", {
        params: {
          PageNum: this.pageNum,
          PageSize: this.pageSize,
          userId: this.search_user_id,
          name: this.search_head
        }
      }).then(res => {
        if (res.data !== null) {
          this.tableData = res.data.list
          this.total = res.data.total
        } else {
          this.tableData=[]
          // this.sendWarnMessage('没有搜索结果！')
        }
      })
    },
    search() { //搜索
      this.search_user_id = this.user_id
      this.search_head = this.head
      this.load()
    },

    back() { //打回
      if(this.message==='') {
        this.sendWarnMessage('请选择打回理由')
      } else {
        request.post('/creative/toUnPublish', {'id': this.creative.id}).then(res => {
          if(res.code === '200') {
            let message = {}
            message.userId = this.creative.userId
            message.content = '您的创意 《'+this.creative.name+'》 '+this.message+'，未能通过审核，请重新修改后发布（如有疑问请联系管理员289812618@qq.com）'
            message.statement = '未读'
            request.post('/message',message).then(res => {
              if(res.code === '200') {
                this.sendSuccessMessage('已通知用户')
              } else {
                this.sendWarnMessage('通知用户失败')
              }
            })
            this.sendSuccessMessage('打回成功')
            this.load()
            this.backDialogVis=false
          } else {
            this.sendWarnMessage('打回失败')
          }
        })
      }
    },
    pass(creative) { //审核通过
      request.post('/creative/toPublish',{'id': creative.id}).then(res => {
        if(res.code === '200') {
          let message = {}
          message.userId = creative.userId
          message.content = '您的创意 《'+creative.name+'》 已成功通过审核'
          message.statement = '未读'
          request.post('/message',message).then(res => {
            if(res.code === '200') {
              this.sendSuccessMessage('已通知用户')
            } else {
              this.sendWarnMessage('通知用户失败')
            }
          })
          this.sendSuccessMessage('审核通过')
          this.load()
        } else {
          this.sendWarnMessage('通过失败')
        }
      })
    },

    reset() { //重置搜索
      this.user_id = ''
      this.head = ''
      this.search_user_id = ''
      this.search_head = ''
      this.load()
    },
  }
}
</script>

<style scoped>

</style>
